<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Mv页面</title>
    <script src="../node_modules/jquery/dist/jquery.min.js"></script>
    <script src="../node_modules/art-template/lib/template-web.js"></script>
    <script src="../node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
    <script src="./js/request.js"></script>
    <link rel="stylesheet" href="./css/common/reset.css">
    <link rel="stylesheet" href="./css/common/common.css">
    <link rel="stylesheet" href="./css/base/base.css">
    <link rel="stylesheet" href="./fonts/iconfont.css">
    <link rel="stylesheet" href="./css/module/mv.css">
    <link rel="stylesheet" href="../node_modules/bootstrap/dist/css/bootstrap.min.css">
    <link rel="shortcut icon" href="./resource/static/favicon.ico" type="image/x-icon">
</head>

<body>
    <!-- 头部部分 -->
    <header></header>
    <!-- main -->
    <main>

        <!-- 开始头部导航的页面编写 -->
        <!-- area: 地区,可选值为全部,内地,港台,欧美,日本,韩国,不填则为全部 type: 类型,可选值为全部,官方版,原生,现场版,网易出品,不填则为全部 -->
        <div class="navLis">
            <ul>
                <p>区域</p>
                <a href="javascript:void(0)" disabled="true" class="areas btnColor">全部</a>
                <a href="javascript:void(0)" disabled="true" class="areas">内地</a>
                <a href="javascript:void(0)" disabled="true" class="areas">港台</a>
                <a href="javascript:void(0)" disabled="true" class="areas">欧美</a>
                <a href="javascript:void(0)" disabled="true" class="areas">日本</a>
                <a href="javascript:void(0)" disabled="true" class="areas">韩国</a>
            </ul>
            <ol>
                <p>类型</p>
                <a href="javascript:void(0)" disabled="true" class="types btnColor">全部</a>
                <a href="javascript:void(0)" disabled="true" class="types">原生</a>
                <a href="javascript:void(0)" disabled="true" class="types">官方版</a>
                <a href="javascript:void(0)" disabled="true" class="types">现场版</a>
                <a href="javascript:void(0)" disabled="true" class="types">网易出品</a>
            </ol>
        </div>

        <!-- 开始布局 -->
        <div id="container">
            <h2>全部MV</h2>
            <div id="cont"></div>
            <div class="pageation"></div>
        </div>
        <script type="text/html" id="tpl">
            {{each data item index}}
                <div class="mvList">
                    <div class="mvItemBox">
                        <a class="modCover" href="./mvDetail.html" title="{{item.artistName}}" javascript:void(0) data-src="{{ item.id }}">
                            <div style="overflow: hidden;width: 370px;"><img src="{{item.cover}}" alt=""></div>
                            <i class="mv-mask"></i>
                        </a>
                        <h3 class="myListTile"><a>{{item.artistName}}</a></h3>
                        <p class="list-signer">{{item.name}}</p>
                        <!-- <div class="list-info">
                            <span>
                                <i class="my-listen"></i>
                                {{item.duration}}
                            </span>
                        </div> -->
                    </div> 
                </div>
            {{/each}}
        </script>
         <!-- 分页渲染 -->
         <script type="text/html" id="page">
            <div class="pageNation">
                <nav aria-label="Page navigation">
                    <ul class="pagination">
                      <% for (let [text, pid] of pager) { %>
                        <li>
                            <a href="javascript:chkLis(<%=pid %>);" aria-label="Previous">
                              <span aria-hidden="true"><%=text %></span>
                            </a>
                          </li>
                        <% } %>
                    </ul>
                  </nav>
            </div>
        </script>
        <script src="./js/reqMv.js"></script>
    </main>
    <!-- footer页面 -->
    <footer></footer>
    <script src="./js/common.js"></script>
    <script src="./js/module/appendID.js"></script>

</body>

</html>